<template>
  <div class="edu-course-image" :style="[wrapStyle]" @click="onClick">
    <edu-image :src="image" :lazy="lazy" :fit="fit"></edu-image>

    <!-- 类型图标 -->
    <slot v-if="$slots.tag" name="tag" />
    <template v-else>
      <div
        v-if="$util.inArray(courseType, [1, 2, 3, 4])"
        :class="[courseIconPos]"
        :style="[courseIconStyle]"
        class="edu-course-image__tag"
      >
        <img class="img" :src="courseIcon[courseType]" />
      </div>
    </template>

    <!-- 活动图标 -->
    <slot v-if="$slots.promotion" name="promotion" />
    <template v-else>
      <div
        v-if="$util.inArray(promotionType, [1, 2, 3, 4])"
        :class="[promotionIconPos]"
        :style="[promotionIconStyle]"
        class="edu-course-image__activity"
      >
        <img class="img" :src="eventIcon[promotionType]" />
      </div>
    </template>

    <slot />
  </div>
</template>

<script>
export default {
  props: {
    image: {
      type: String,
      default: ''
    },
    // 宽
    width: {
      type: [String, Number],
      default: '100%'
    },
    // 高
    height: {
      type: [String, Number],
      default: '155px'
    },
    // 圆角
    borderRadius: {
      type: [String, Number],
      default: 0
    },
    // 是否开启懒加载
    lazy: {
      type: Boolean,
      default: false
    },
    // 确定图片如何适应容器框
    fit: {
      type: String,
      default: 'cover'
    },
    // 光标
    cursor: {
      type: String,
      default: 'pointer'
    },
    // 课程类型
    courseType: {
      type: Number,
      default: 0
    },
    // 课程图标位置topLeft|topRight|bottomLeft|bottomRight
    courseIconPos: {
      type: String,
      default: 'topLeft'
    },
    // 课程图标圆角 字符串形式，如"4px"、"4px 4px"
    courseIconRadius: {
      type: String,
      default: '4px'
    },
    // 活动类型
    promotionType: {
      type: Number,
      default: 0
    },
    // 活动图标位置topLeft|topRight|bottomLeft|bottomRight
    promotionIconPos: {
      type: String,
      default: 'bottomRight'
    },
    // 活动图标圆角 字符串形式，如"4px"、"4px 4px"
    promotionIconRadius: {
      type: String,
      default: '4px'
    }
  },
  computed: {
    wrapStyle() {
      let style = {}
      style.width = this.$util.addUnit(this.width)
      style.height = this.$util.addUnit(this.height)
      style.borderRadius = this.$util.addUnit(this.borderRadius)
      style.cursor = this.cursor
      // 如果设置圆角，必须要有hidden，否则可能圆角无效
      style.overflow = this.borderRadius > 0 ? 'hidden' : 'visible'
      return style
    },
    courseIconStyle() {
      let style = {}
      style.borderRadius = this.$util.addUnit(this.courseIconRadius)
      return style
    },
    promotionIconStyle() {
      let style = {}
      style.borderRadius = this.$util.addUnit(this.promotionIconRadius)
      return style
    }
  },
  data() {
    return {
      courseIcon: {
        1: require('@/assets/images/course/course_video_icon.png'),
        2: require('@/assets/images/course/course_live_icon.png'),
        4: require('@/assets/images/course/course_class_icon.png')
      },
      eventIcon: {
        1: require('@/assets/images/course/course_discount_icon.png'),
        2: require('@/assets/images/course/course_miaosha_icon.png'),
        3: require('@/assets/images/course/course_kanjia_icon.png'),
        4: require('@/assets/images/course/course_pintuan_icon.png')
      }
    }
  },
  methods: {
    onClick() {
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss" scoped>
.edu-course-image {
  position: relative;
  .el-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  &__tag {
    position: absolute;
    overflow: hidden;
    .img {
      display: block;
    }
    &.topLeft {
      left: 0;
      top: 0;
    }
    &.topRight {
      top: 0;
      right: 0;
    }
    &.bottomLeft {
      left: 0;
      bottom: 0;
    }
    &.bottomRight {
      right: 0;
      bottom: 0;
    }
  }
  &__activity {
    position: absolute;
    .img {
      display: block;
    }
    &.topLeft {
      left: 0;
      top: 0;
    }
    &.topRight {
      top: 0;
      right: 0;
    }
    &.bottomLeft {
      left: 0;
      bottom: 0;
    }
    &.bottomRight {
      right: 0;
      bottom: 0;
    }
  }
}
</style>
